<style lang="less">
@import '../../../styles/common.less';
</style>
<!--电催录入-->
<template>
  <Row>
    <Form :label-width="150" inline>
      <div class='main_item'>
        <div @click="dataShow('electricalInputDiv')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">电催录入</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="electricalInputDiv_icon"></Icon>
          </span>
        </div>
        <div id="electricalInputDiv" class="main_item_content_block">
          <div style="margin:3px 10px 3px 10px;">
            <Table border :columns="electricalInputColumns" :data="electricalInputData" style="width: 100%;"></Table>
            <Button type="primary" icon="md-add" @click="addElectricalInputColumns" style="width:60px;" v-if="collectTaskParams.overdueType !='1'" ></Button>
          </div>
        </div>
      </div>
    </Form>

    <Form action="" method="get" name="exportFile" id="exportFile" enctype="multipart/form-data">
      <input id="id" name="id" type="hidden"  />
    </Form>

  </Row>
</template>

<script>
export default {
  name: 'collect-base-info',
  data () {
    return {
      index: '',
      actionInfo: {
        actionCode: '',
        actionName: '',
        actionStatusCode: '',
        actionStatusName: '',
        remarks: '',
        promiseAmount: '',
        promiseDate: '',
        contactPerson: '',
        relationCode: '',
        relationType: '',
        contactType: '',
        meetDate: '',
        loanId: '',
        custCardNo: '',
        overdueCode: ''
      },
      actionCodeList: [],
      actionResultList: [],
      electricalResultList: [

      ],
      relationManList: [],
      electricalChkEmptyRowData: {
        pohneType: '',
        id: '',
        contactorName: '',
        phoneNbr: '',
        resultCde: '',
        resultName: '',
        memo: '',
        updatedBy: '',
        updatedDate: '',
        startTime: ''
      },
      electricalInputColumns: [{
        title: '电话类型',
        key: 'pohneType',
        align: 'center',
        render: (h, params) => {
          var vm = this
          return h('Select', {
            style: {
              'margin-top': '2px'
            },
            props: {
              value: params.row.pohneType,
              'label-in-value': true,
              disabled: (params.row.id !== '' && params.row.id !== null) === true
            },
            on: {
              'on-change' (value) {
                vm.initTempChkDataObject(params)
                vm.$set(vm.relationManList[params.index], 'code', value.value)
                params.row.contactName = ''
                params.row.phoneNo = ''
                vm.$set(vm.tempChkData[params.index], 'contactName', '')
                vm.$set(vm.tempChkData[params.index], 'phoneNbr', '')
                if (vm.relationManList && vm.relationManList.length > 0) {
                  for (var i in vm.relationManList) {
                    if (value.value === vm.relationManList[i].relationCode) {
                      params.row.contactName = vm.relationManList[i].code
                      params.row.phoneNbr = vm.relationManList[i].relationMobile
                      vm.$set(vm.tempChkData[params.index], 'contactName', vm.contactData[i].contactName)
                      vm.$set(vm.tempChkData[params.index], 'phoneNbr', vm.contactData[i].contactMobile)
                      break
                    }
                  }
                }
                vm.$set(vm.tempChkData[params.index], 'pohneType', value.value)
                vm.$set(vm.tempChkData[params.index], 'pohneName', value.label)
              }
            }
          }, this.relationManList.map(function (item) {
            return h('Option', {
              props: {
                value: item.code
              }
            }, item.name)
          }))
        }
      },
      {
        title: '联系人姓名',
        key: 'contactorName',
        align: 'center',
        render: function (h, params) {
          const vm = this
          return h('Input', {
            style: {
              'margin-top': '2px'
            },
            props: {
              type: 'text',
              value: params.row.contactorName,
              disabled: (params.row.id !== '' && params.row.id !== null) === true
            },
            on: {
              'on-change' (e) {
                vm.initTempChkDataObject(params)
                vm.$set(vm.tempChkData[params.index], 'contactorName', e.target.value)
              }
            }
          })
        }.bind(this)
      },
      {
        title: '电话号码',
        key: 'phoneNbr',
        align: 'center',
        render: function (h, params) {
          const vm = this
          return h('Input', {
            style: {
              'margin-top': '2px'
            },
            props: {
              type: 'text',
              value: params.row.phoneNbr,
              disabled: (params.row.id !== '' && params.row.id !== null) === true
            },
            on: {
              'on-change' (e) {
                vm.initTempChkDataObject(params)
                vm.$set(vm.tempChkData[params.index], 'phoneNbr', e.target.value)
              }
            }
          })
        }.bind(this)
      },
      {
        title: '电催结果',
        key: 'resultCde',
        align: 'center',
        render: function (h, params) {
          const vm = this
          return h('Select', {
            style: {
              'margin-top': '2px'
            },
            props: {
              value: params.row.resultCde,
              'label-in-value': true,
              disabled: ((params.row.id !== '' && params.row.id !== null) && !params.row.edit) === true
            },
            on: {
              'on-change' (value) {
                vm.initTempChkDataObject(params)
                vm.$set(vm.tempChkData[params.index], 'resultCde', value.value)
                vm.$set(vm.tempChkData[params.index], 'resultName', value.label)
              }
            }
          }, this.electricalResultList.map(function (item) {
            return h('Option', {
              props: {
                value: item.resultCode
              }
            }, item.resultName)
          }))
        }.bind(this)
      },
      {
        title: '电催备注',
        key: 'memo',
        align: 'center',
        render: function (h, params) {
          const vm = this
          return h('Input', {
            style: {
              'margin-top': '2px'
            },
            props: {
              type: 'text',
              value: params.row.memo,
              disabled: ((params.row.id !== '' && params.row.id !== null) && !params.row.edit) === true
            },
            on: {
              'on-change' (e) {
                vm.initTempChkDataObject(params)
                vm.$set(vm.tempChkData[params.index], 'memo', e.target.value)
              }
            }
          })
        }.bind(this)
      },
      {
        title: '操作人',
        key: 'updatedBy',
        align: 'center'
      },
      {
        title: '电催时间',
        key: 'updatedDate',
        align: 'center',
        render: (h, params) => {
          var vm = this
          if (params.row.id !== '' && params.row.id !== null) {
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.updatedDate))
            ])
          }
        }
      },
      // {
      //   title: '通话时间',
      //   key: 'startTime',
      //   align: 'center',
      //   render: (h, params) => {
      //     var vm = this
      //     if (params.row.id !== '' && params.row.id !== null) {
      //       return h('div', [
      //         h('span', vm.$util.loanModularFormatTime(params.row.startTime))
      //       ])
      //     }
      //   }
      // },
      {
        align: 'center',
        render: (h, params) => {
          var vm = this
          if ((params.row.id !== '' && params.row.id !== null) && !params.row.edit) {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    vm.dial(params)
                  }
                }
              }, ' 拨号'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    vm.electricalInputData[params.index].edit = true
                  }
                }
              }, ' 编辑')
            ])
          } else {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.tempChkData[params.index].overdueCode = vm.collectTaskParams.overdueCode
                  if (params.row.id !== '' && params.row.id !== null) {
                    vm.tempChkData[params.index].id = vm.electricalInputData[params.index].id
                    this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/modifyElectricCollectInfo', vm.tempChkData[params.index]).then(re => {
                      var data = re.data
                      var code = data.code
                      var message = data.message
                      if (code === 'success') {
                        vm.initData()
                      } else {
                        this.$Message.warning(message)
                      }
                    }).catch(er => {

                    })
                  } else {
                    var reqParams = vm.tempChkData[params.index]
                    reqParams.overdueCaseId = this.collectTaskParams.overdueCaseId
                    this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/addElectricCollectInfo', reqParams).then(re => {
                      var data = re.data
                      var code = data.code
                      var message = data.message
                      if (code === 'success') {
                        vm.initData()
                      } else {
                        this.$Message.warning(message)
                      }
                    }).catch(er => {

                    })
                  }
                }
              }
            }, '提交')
          }
        }
      }
      ],
      electricalInputData: [],
      tempChkData: [],
      visitForeignData: [],
      tmpVisitForeignData: [],
      visitForeignChkEmptyRowData: {
        id: '',
        visitDate: '',
        collectorName: '',
        collectorPhone: '',
        address: '',
        memo: '',
        oprator: '',
        updatedDate: '',
        loanModularFormatTime: ''
      },
      comptParams: {
        loanId: '',
        overdueCode: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initData()
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.comptParams.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.comptParams.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      vm.comptParams.loanId = this.collectTaskParams.loanId
      vm.comptParams.overdueCode = this.collectTaskParams.overdueCode
      vm.comptParams.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/initialOperationEntry', vm.comptParams).then(re => {
        var data = re.data.data
        vm.electricalInputData = data.verificationList || []
        vm.relationManList = data.relationList || []
        vm.electricalResultList = data.electricList || []
      }).catch(er => {

      })
    },
    relationManChange (value) {
      this.actionInfo.contactPerson = value.label
    },
    relationTypeChange (value) {
      this.actionInfo.contactType = value.label
    },
    actionCodeChange (value) {
      this.actionInfo.actionName = value.label
    },
    actionResultChange (value) {
      this.actionInfo.actionStatusName = value.label
    },
    initTempChkDataObject (params) {
      if (!this.tempChkData[params.index]) {
        this.tempChkData[params.index] = {}
      }
    },
    initTmpVisitForeignData (params) {
      if (!this.tmpVisitForeignData[params.index]) {
        this.tmpVisitForeignData[params.index] = {}
      }
    },
    // 点击tab事件
    addElectricalInputColumns () {
      var vm = this
      vm.electricalInputData.push(this.$util.cloneObject(this.electricalChkEmptyRowData))
    },
    addVisitForeignColumns () {
      var vm = this
      vm.visitForeignData.push(this.$util.cloneObject(this.visitForeignChkEmptyRowData))
    },
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    // 拨号
    dial (params) {
      var vm = this
      var phoneNbr = params.row.phoneNbr
      if (phoneNbr === null || phoneNbr === '') {
        this.$Message.warning('手机号码不能为空')
        return
      }
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/process/task_process/service/getLoginUserInfo').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        var shortPhoneNo = data.data.shortPhoneNo
        if (shortPhoneNo && shortPhoneNo !== '') {
          var backUrl = this.$appContext.marvels_core_approve + 'approve/process/task_process/service/writeCallInfo/' + params.row.id
          $.ajax({
            url: 'http://10.0.17.200:9800/SmartWS.php',
            data: {
              'Act': 'Call_Originate',
              'Ext': shortPhoneNo,
              'Dest': phoneNbr,
              // 'Area':area,
              // 回写地址
              'Writeback': backUrl
            },
            dataType: 'jsonp',
            jsonp: 'jsonpCallback',
            jsonpCallback: 'SmartWS',
            success: function (retData, textStatus, jqXHR) {
              if (retData.retinfo === 'SUCCESS') {
                vm.$Message.success('已成功拨通对方号码，请拿起话机')
              } else {
                vm.$Message.warning('未拨通')
              }
            }
          })
        } else {
          this.$Message.warning('您没有注册短号')
        }
      }).catch(er => {

      })
    },
    uploadFail (response) {

    },
    uploadLoading (index) {
      this.index = index
    }
  },
  props: {
    collectTaskParams: Object
  }

}
</script>
